import { readable } from 'svelte/store';

import { browser } from '$app/environment';

const reduced_motion_query = '(prefers-reduced-motion: reduce)';

const get_initial_motion_preference = () => {
  if (!browser) return false;
  return window.matchMedia(reduced_motion_query).matches;
};

export const reduced_motion = readable(
  get_initial_motion_preference(),
  (set) => {
    if (browser) {
      const set_reduced_motion = (event: MediaQueryListEvent) => {
        set(event.matches);
      };
      const media_query_list = window.matchMedia(reduced_motion_query);
      media_query_list.addEventListener('change', set_reduced_motion);

      return () => {
        media_query_list.removeEventListener('change', set_reduced_motion);
      };
    }
  },
);
